<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="divport" content="width=device-width, initial-scale=1" />
    <title>个人中心</title>
    <meta name="keywords" content="文乐文" />
    <meta name="description" content="文乐文" />

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="static/css/common.css" type="text/css" />
    <link rel="stylesheet" href="static/css/element2.css" />
    <script src="static/js/element-china-area-data.iife.js"></script>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 包含头部 -->
      <div class="header_box">
        <!-- container-fluid -->
        <div class="header container">
          <div class="logo_box">
            <img src="static/picture/logo2.png" />
          </div>
          <div class="nav_box">
            <a href="index.html">
              <div class="item">首页</div>
            </a>
            <a href="goods.html">
              <div class="item">产品中心</div>
            </a>
            <a href="integral.html">
              <div class="item">积分商城</div>
            </a>
            <a href="lease.html">
              <div class="item">进销存ERP</div>
            </a>
            <a href="service.html">
              <div class="item">服务与支持</div>
            </a>
            <a href="my.html">
              <div class="item">个人中心</div>
            </a>
          </div>
          <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none">
              <div class="list">
                <a
                  target="_blank"
                  href="https://mall.jd.com/index-11504190.html?from=pc"
                  >文乐文京东旗舰店</a
                >
              </div>
            </div>
          </div>
          <div class="search_box">
            <input
              name="keyword"
              type="text"
              class="search_input"
              id="header_search_input"
              placeholder="搜索"
            />
            <button id="header_search_btn" class="search_btn"></button>
          </div>
        </div>
      </div>

      <div class="page_order_list container">
        <div class="title">开票信息</div>
        <div class="col-sm-12 address_new">
          <div class="btn_box">
            <el-button @click="bacgPage" type="warning" icon="el-icon-arrow-left"  size="small"></el-button>
          </div>
        </div>
       
        
		<div class="tabCheck">
			<span @click="form.invoiceComType = 0" :class="form.invoiceComType == 0?'active':''">个人 <i class="line"></i> </span>
			<span @click="form.invoiceComType = 1" :class="form.invoiceComType == 1?'active':''">公司 <i class="line"></i></span>
		</div>
		<form  >
			<div class='addAddress pad30' v-if="form.invoiceComType == 0">
				<div class='list borRadius14'>
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>发票抬头</div>
						<input type='text' v-model="form.invoiceTitle" placeholder='请输入发票抬头' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>发票内容</div>
						<input type='text' v-model="form.invoiceContent"  placeholder='请输入发票内容' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
				</div>
			</div>
			
			<div class='addAddress pad30' v-if="form.invoiceComType == 1">
				<div class='list borRadius14'>
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>发票抬头</div>
						<input type='text' v-model="form.invoiceTitle" placeholder='请输入发票抬头' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>发票内容</div>
						<input type='text'  v-model="form.invoiceContent"  placeholder='请输入发票内容' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>发票类型</div>
						
						<div class="checkfapiao">
							<span @click="form.invoiceType = 0" :class="form.invoiceType == 0?'active':''">普通发票</span>
							<span @click="form.invoiceType = 1" :class="form.invoiceType == 1?'active':''">增值税发票</span>
						</div>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>公司税号</div>
						<input type='text' v-model="form.taxNum" placeholder='请输入公司税号' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>开户银行</div>
						<input type='text'  v-model="form.bankName" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>银行账号</div>
						<input type='text' v-model="form.bankAccount" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>企业地址</div>
						<input type='text'  v-model="form.companyAddress" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
					
					<div class='item acea-row row-between-wrapper' style="border: none;">
						<div class='name'>企业电话</div>
						<input type='text' v-model="form.companyPhone" placeholder='选填' placeholder-style="color:#ccc;" name='realName' placeholder-class='placeholder' ></input>
					</div>
				</div>
			</div>
		</form>
		
		<div class="btnssss">
			<div class="save" @click="save">
				保存
			</div>
		</div>
      </div>

      <!-- 包含公共底部文件 -->
      <div class="footer">
        <div class="footer_box container">
          <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
              <p class="title">全国统一热线电话</p>
              <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
              <p class="title">服务邮箱</p>
              <p class="mail">598292588@qq.com</p>
            </div>
          </div>
          <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
              <li><a href="about.html">关于我们</a></li>
              <li><a href="">商品中心</a></li>
              <li><a href="lease.html">打印机租赁</a></li>
              <li><a href="service.html">服务与支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </div>
          <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
              <input class="search_input" name="keyword" placeholder="搜索" />
              <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
              <a
                class="btn btn-primary jd_btn"
                target="_blank"
                href="https://mall.jd.com/index-11504190.html?from=pc"
                >京东商城</a
              >
            </div>
            <div class="wechat_box">
              <div class="item">
                <img src="static/picture/wechat.svg" />
              </div>
              <div class="item">
                <img src="static/picture/weibo.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="site_info container">
          Copyright ©2020 宁波文乐文科技有限公司 版权所有
          <a href="https://beian.miit.gov.cn/#/Integrated/index"
            >浙ICP备2020041669号-1</a
          >
        </div>
      </div>
    </div>

    <script src="static/js/vue2.js"></script>
    <script src="static/js/element2.js"></script>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
    <script src="static/js/pca-code.js"></script>
  </body>
</html>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      kaipiaoIndex:0,
				
				form:{
					invoiceComType:0,
					invoiceType:0,
					invoiceTitle:'',
					invoiceContent:'',
					taxNum:'',
					bankName:'',
					bankAccount:'',
					companyAddress:'',
					companyPhone:''
				}
    },
    created() {
      var token = localStorage.getItem("token")
        ? localStorage.getItem("token")
        : "";

      if (!token) {
        this.$message.error("请先登录");
        setTimeout(() => {
          window.location.href = "./index.html";
        }, 1500);
      }

      this.getData();
    },
    methods: {
      getData() {
        $.ajax({
          url: apiurl + "/api/front/invoice/getOne",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            console.log(res)
            // this.kaipiaolist = res.data.list;
            if(res.data){
              this.form = res.data
            }
          },
        });
      },
      save() {

        if(this.invoiceComType == 1){
					if(this.form.taxNum == ''){
						return this.$message.error('请输入公司税号')
					}
				}
				
				
				if(this.form.invoiceTitle == ''){
					return this.$message.error('请输入发票抬头')
				}
				
				if(this.form.invoiceContent == ''){
					return this.$message.error('请输入发票内容')
				}
				

        $.ajax({
          url: apiurl + `/api/front/invoice/edit`,
          data: JSON.stringify(this.form),
          type: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getData();
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      bacgPage(){
        window.history.back();
      }
    },
  });
</script>

<style>
  .userInfo {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .userInfo div {
    font-size: 17px;
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
  }
  .active {
    color: red;
  }


  .checkfapiao {
		width: 240px;
		
	}


  .checkfapiao span{
			margin-left: 20px;
		}
		.checkfapiao .active{
			color: #ec4747;
		}
	.btnssss .save{
			width: 200px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ec4747;
			color: #fff;
			border-radius: 50px;
			margin: 15px auto;
      cursor: pointer;
	}

  .addAddress {
    width: 50%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
  }

  .addAddress .list .item{
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .addAddress .list .item .name{
    margin-right: 10px;
  }

  .addAddress .list .item  input{
    outline: none;
    width: 88%;
    height: 35px;
    font-size: 14px;
    padding-left: 10px;
  }
	.tabCheck{
		width: 300px;
    margin: 0 auto;
    display: block;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		font-size: 15px;
		cursor: pointer;
	}
.tabCheck span{
  width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
}

.tabCheck span .line{
  width: 80px;
				height: 2px;
				background-color: red;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				opacity: 0;
}

.tabCheck .active{
			.line{
				opacity: 1;
			}
		}
	.kaiPiao{
		background-color: #fff;
		padding: 10px;
	}

  .kaiPiao .title{
			text-align: center;
			margin-bottom: 10px;
			font-size: 16px;
		}
	
</style>
